<template>
  <div>
    App
    <!-- 插槽有 默认插槽 具名插槽 作用域插槽 -->
    <BComp>
      <!-- 默认插槽 组件双标签内直接写 -->
      <div>
        <i>默认插槽</i>
      </div>
    </BComp>
    <CComp>
      <!-- 具名插槽 写在template标签里，用 v-slot：插槽名 起名 #插槽名 是其简写 -->
        <template v-slot:slot1 >
          <span>具名插槽1</span>
        </template>
        <template #slot2 >
          <span>具名插槽2</span>
        </template>
    </CComp>
    <DComp>
      <!-- 主组件接收默认插槽数据 
          在template里写 v-slot:default="slotScoped" 使用的时候 slotScoped.数据
          可简写为 v-slot="{ 数据 }" 使用时直接写数据名即可
       -->
      <!-- <template v-slot:default="slotScoped">
        <p > {{num}} </p>
        <p v-show="slotScoped.isShow">show</p>
      </template> -->

      <template v-slot="{ isShow }">
        <p > {{num}} </p>
        <p v-show="isShow">show</p>
      </template>

      <!-- 接收具名插槽的数据时  #插槽名="{数据}" 使用时直接使用即可-->
      <template #slot4 = "{str}" >
        <span> {{ str }} </span>
      </template>
      
    </DComp>
    <EComp>
      <!-- 默认插槽 -->
      <div>
        <span>304 {{num2}} </span>
        <p>重定向状态码</p>
      </div>
      <!-- 具名插槽 -->
      <template v-slot:code2>
        <span>200</span>
        <p>200系列是用来表示请求成功处理</p>
      </template>
      <template #code>
        <span>300</span>
        <p>300系列是用来表示重定向的</p>
      </template> 
      <!-- 插槽作用域 -->
      <!-- 接收莫名插槽数据 -->
      <!-- <template v-slot="{ num3 }">
        {{num3}}
      </template> -->
      <!-- 接收具名插槽数据 -->
      <template #code3= "{num4}">
        <p>{{ num4 }}== </p>
      </template>
      
    </EComp>

     
  </div>
</template>

<script>
import BComp from "./b.vue";
import CComp from "./c.vue";
import DComp from "./D.vue";
import EComp from "./E.vue";

export default {
  name: "App",
  data(){
    return {
      num: 1,
      num2:300,
    }
  },
  components:{
    BComp,
    CComp,
    DComp,
    EComp,
  }
};

</script>

